<!--  -->
<template>
  <div>
    <div class="title">居民管理</div>
    <ELTable @multiple-selection="selection" ref="userTable" v-bind="tableConfig">
      <template #search="{searchSubmit,params}">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="楼栋">
            <Buildings @change="(e)=>buildingChange(e,params)"></Buildings>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input style="width:150px"  v-model="params.name" placeholder="请输入姓名" clearable />
          </el-form-item>
          <el-form-item label="电话">
            <el-input style="width:150px" v-model="params.mobile" placeholder="请输入电话" clearable />
          </el-form-item>
          <el-form-item label="房间号">
            <el-input style="width:150px"  v-model="params.houseno" placeholder="请输入房间号" clearable />
          </el-form-item>
          <el-form-item label="业主类型">
          <el-select clearable v-model="params.usertype" style="width:120px" placeholder="请选择状态">
            <el-option label="租户" value="2" />
            <el-option label="业主" value="1" />
          </el-select>
        </el-form-item>
          <el-form-item>
              <el-button type="primary" @click="searchSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
      </template>
      <template #buttons="{ deleteAllHandle }">
        <el-button @click="add" type="primary">添加</el-button>
        <el-button @click="deleteAllHandle" type="danger">删除</el-button>
        <el-button @click="updateStateHandle(1)" type="primary">取消审核</el-button>
        <el-button @click="updateStateHandle(2)" type="primary">批量审核</el-button>
      </template>
      <template #operate="{ scope, deleteHandle }">
        <el-button @click="edit(scope.row)" type="primary" >修改</el-button>
        <el-button @click="deleteHandle(scope.row.id)" type="danger">删除</el-button>
      </template>
    
    </ELTable>
    <Add v-bind="editUser" @close="handleClose" v-if="isAdd"></Add>
  </div>
</template>
<script lang='ts' setup>
import ELTable, { TableType } from '../../components/ELTable.vue';
import { getList,del,deleteAll,updateState } from '../../service/userinfo/userinfo';
import { reactive, toRefs, ref, onMounted } from 'vue'
import Buildings from '../../components/building/Buildings.vue';
import Add from '../../components/user/Add.vue';
import { UserInfo } from '../../service/userinfo/type';
import { ElMessageBox } from 'element-plus'
const isAdd=ref(false);

const editUser = reactive<UserInfo>({
  id: 0,
        photo:"",
        name:"",
        houseid: null,
        usertype:null,
        sex:0,
        buildingid:null,
        mobile: "",
        usernative:"",
        cardid: "",
        nation:""
})

const add=()=>{
  Object.assign(editUser,{id: 0,
        photo:"",
        name:"",
        houseid: null,
        usertype:null,
        buildingid:null,
        sex:0,
        mobile: "",
        usernative:"",
        cardid: "",
        nation:""
});
  isAdd.value=true;
}
const edit=(item:UserInfo)=>{


   Object.assign(editUser,item);
    isAdd.value=true;
   
   
}

//批量审核
const ids=ref<number[]>([]);
const selection=(e:any[])=>{
 
  ids.value=e.map(item=>item.id);
  
}
const updateStateHandle=async (state:number)=>{

  if(ids.value.length==0){
    ElMessage.error('请选择要操作的记录.');
    return;
  }
  await ElMessageBox.confirm(`是否要${state===1 ? "取消":""}审核这些记录?`)
    .then(async () => {
      
      const res:any=await updateState(ids.value,state);
  if(res.errCode===10000){
    userTable.value.getData();
  }

    })
    .catch(() => {
      // catch error
    })





}

const userTable=ref<any>();
const tableConfig = reactive<TableType>({
  loadData: getList,
  delete:del,
  deleteAll:deleteAll,
  columns: [{
    prop: "id",
    label: "id",
    attrs: { width:80 }
  },
  {
    prop: "photo",
    label: "头像",
    image:true,
    attrs: { width:80 }

  },
  {
    prop: "name",
    label: "姓名"
  },
  {
    prop: "usertypeName",
    label: "类型"
  },
  {
    prop: "cardid",
    label: "身份证号"
  },
  {
    prop: "sex",
    label: "性别"
  },
  {
    prop: "mobile",
    label: "手机号"
  },
  {
    prop: "usernative",
    label: "籍贯"
  },
  {
    prop: "nation",
    label: "民族"
  },
  {
    prop: "building",
    label: "小区",
    attrs: { minWidth:200 }
  },
  {
    prop: "houseno",
    label: "房间号"

  },
  {
    prop: "stateName",
    label: "状态"

  },
  {
    prop: "operate",
    label: "操作",
    slot: true,
    attrs: { width:180,fixed:"right" }
  }
  ]
})
const buildingChange=(e:any,params:any)=>{

  console.log(999,e);
  params.buildingid=e;
  

}

const handleClose=(val:boolean | undefined)=>{
  isAdd.value=false;
  if(val){
     console.log("提交成功，刷新页面");
     userTable.value.params.page=1;
     userTable.value.getData();
     
  }

}
</script>
<style scoped>
.title {
  margin-bottom: 20px;
}
/deep/ .el-form--inline .el-form-item{
  margin-right: 20px;
}
</style>